<template>
  <view class="new-file">
    <!-- 头部选项卡 -->
   <view class="head-nav">
      <view :class="navIndex==1?'activite':''" @click="checkIndex(1)">进行中</view>
      <view :class="navIndex==2?'activite':''" @click="checkIndex(2)">未开始</view>
	  <view :class="navIndex==3?'activite':''" @click="checkIndex(3)">未开放</view>
	  <view :class="navIndex==4?'activite':''" @click="checkIndex(4)">已完成</view>
    </view>
    <!-- 内容切换 -->
   <view class="content" v-if="navIndex==1">
	   <view class="jx">
	   	<view class="jxleft">
	   		<image src="../../static/luleft.png" mode=""></image>
	   	</view>
	   	<view class="jxcenter">
	   		<text>瑞金--老山界</text>
	   		<span>本路段共1111里，您已行走111里</span>
	   	</view>
		<view class="jxright">
			<button type="default"></button>
		</view>
	   </view>
	   <view class="jx">
	   	<view class="jxleft">
	   		<image src="../../static/luleft.png" mode=""></image>
	   	</view>
	   	<view class="jxcenter">
	   		<text>老山界--遵义</text>
	   		<span>本路段共1111里，您已行走111里</span>
	   	</view>
	   		<view class="jxright">
	   			<button type="default"></button>
	   		</view>
	   </view>
	   <view class="jx">
	   	<view class="jxleft">
	   		<image src="../../static/luleft.png" mode=""></image>
	   	</view>
	   	<view class="jxcenter">
	   		<text>遵义--昆明</text>
	   		<span>本路段共1111里，您已行走111里</span>
	   	</view>
	   		<view class="jxright">
	   			<button type="default"></button>
	   		</view>
	   </view>
    </view>
    <view class="content" v-if="navIndex==2">
      <view class="wk">
      	<view class="wkleft">
      		<image src="../../static/luleft.png" mode=""></image>
      	</view>
      	<view class="wkcenter">
      		<text>瑞金--老山界</text>
      		<span>本路段共1111里，您已行走111里</span>
      	</view>
      		<view class="wkright">
      			<button type="default">开始</button>
      		</view>
      </view>
      <view class="wk">
      	<view class="wkleft">
      		<image src="../../static/luleft.png" mode=""></image>
      	</view>
      	<view class="wkcenter">
      		<text>老山界--遵义</text>
      		<span>本路段共1111里，您已行走111里</span>
      	</view>
      		<view class="wkright">
      			<button type="default">开始</button>
      		</view>
      </view>
      <view class="wk">
      	<view class="wkleft">
      		<image src="../../static/luleft.png" mode=""></image>
      	</view>
      	<view class="wkcenter">
      		<text>遵义--昆明</text>
      		<span>本路段共1111里，您已行走111里</span>
      	</view>
      		<view class="wkright">
      			<button type="default">开始</button>
      		</view>
      </view>
    </view>
	<view class="content" v-if="navIndex==3">
	  <view class="wkf">
	  	<view class="wkfleft">
	  		<image src="../../static/weikaif.png" mode=""></image>
	  	</view>
	  	<view class="wkfcenter">
	  		<text>瑞金--老山界</text>
	  		<span>本路段共1111里，您已行走111里</span>
	  	</view>
	  </view>
	  <view class="wkf">
	  	<view class="wkfleft">
	  		<image src="../../static/weikaif.png" mode=""></image>
	  	</view>
	  	<view class="wkfcenter">
	  		<text>老山界--遵义</text>
	  		<span>本路段共1111里，您已行走111里</span>
	  	</view>
	  </view>
	  <view class="wkf">
	  	<view class="wkfleft">
	  		<image src="../../static/weikaif.png" mode=""></image>
	  	</view>
	  	<view class="wkfcenter">
	  		<text>遵义--昆明</text>
	  		<span>本路段共1111里，您已行走111里</span>
	  	</view>
	  </view>
	</view>
	<view class="content" v-if="navIndex==4">
	  <view class="yw">
	  	<view class="ywleft">
	  		<image src="../../static/luleft.png" mode=""></image>
	  	</view>
	  	<view class="ywcenter">
	  		<text>遵义--昆明</text>
	  		<span>本路段共1111里，您已行走111里</span>
	  	</view>
	  		<view class="ywright">
	  			<navigator url="">></navigator>
	  		</view>
	  </view>
	  <view class="yw">
	  	<view class="ywleft">
	  		<image src="../../static/luleft.png" mode=""></image>
	  	</view>
	  	<view class="ywcenter">
	  		<text>遵义--昆明</text>
	  		<span>本路段共1111里，您已行走111里</span>
	  	</view>
	  		<view class="ywright">
	  			<navigator url="">></navigator>
	  		</view>
	  </view>
	  <view class="yw">
	  	<view class="ywleft">
	  		<image src="../../static/luleft.png" mode=""></image>
	  	</view>
	  	<view class="ywcenter">
	  		<text>遵义--昆明</text>
	  		<span>本路段共1111里，您已行走111里</span>
	  	</view>
	  		<view class="ywright">
	  			<navigator url="">></navigator>
	  		</view>
	  </view>
	  <view class="yw">
	  	<view class="ywleft">
	  		<image src="../../static/luleft.png" mode=""></image>
	  	</view>
	  	<view class="ywcenter">
	  		<text>遵义--昆明</text>
	  		<span>本路段共1111里，您已行走111里</span>
	  	</view>
	  		<view class="ywright">
	  			<navigator url="">></navigator>
	  		</view>
	  </view>
	  <view class="yw">
	  	<view class="ywleft">
	  		<image src="../../static/luleft.png" mode=""></image>
	  	</view>
	  	<view class="ywcenter">
	  		<text>遵义--昆明</text>
	  		<span>本路段共1111里，您已行走111里</span>
	  	</view>
	  		<view class="ywright">
	  			<navigator url="">></navigator>
	  		</view>
	  </view>
	</view>
  </view>
  
</template>

<script>
  export default{
    data(){
      return{
        navIndex:1,
        navList:["选项卡一","选项卡二","选项卡三","选项卡四"],
        listIndex:0
      }
    },
    methods:{
      checkIndex(index){
        this.navIndex =index;
      },
      
      checkListIndex(index){
        this.listIndex=index;
      }
    }
  }
</script>

<style scoped>
	.new-file{
		
	}
  .head-nav{
    width: 90%;
	margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin-top: 20rpx;
  }
  .activite{
    font-weight: bold;
    border-bottom: 6rpx solid #f00;
  }
  .head-nav>view{
    padding-bottom: 10rpx;
  }
  .box{background: #008000;}
  .content{
	height: 960rpx;
	background-color: #EBEAEA;
    padding-top: 30rpx;
  }
  .jx{
	  width: 90%;
	  margin: 0 auto;
	  display: flex;
	  flex-direction: row;
	  border-radius: 15rpx;
	  background-color: #fff;
	  margin-bottom: 40rpx;
  }
  .jxleft image{
	  width: 150rpx;
	  height: 100rpx;
	  padding: 20rpx;
  }
  .jxcenter{
	  display: flex;
	  flex-direction: column;
  }
  .jxcenter text{
	  padding-left: 50rpx;
	  padding-top: 30rpx;
  }
  .jxcenter span{
	  font-size: 18rpx;
	  padding-left: 50rpx;
	  padding-top: 10rpx;
  }
  .jxright{
	  margin-left: 50rpx;
	  margin-top: 30rpx;
	  
  }
  .jxright button{
	  width: 70rpx;
	  height: 70rpx;
  }
  
  .wk{
  	  width: 90%;
  	  margin: 0 auto;
  	  display: flex;
  	  flex-direction: row;
  	  border-radius: 15rpx;
  	  background-color: #fff;
  	  margin-bottom: 40rpx;
  }
  .wkleft image{
  	  width: 150rpx;
  	  height: 100rpx;
  	  padding: 20rpx;
  }
  .wkcenter{
  	  display: flex;
  	  flex-direction: column;
  }
  .wkcenter text{
  	  padding-left: 50rpx;
  	  padding-top: 30rpx;
  }
  .wkcenter span{
  	  font-size: 18rpx;
  	  padding-left: 50rpx;
  	  padding-top: 10rpx;
  }
  .wkright{
  	  margin-left: 50rpx;
  	  margin-top: 40rpx;
  }
  .wkright button{
	  background-color: #fff;
	  border-radius: 25rpx;
	  box-shadow: 0rpx 0rpx 5rpx;
	  display: block;
	  font-size: 25rpx;
  }
  
  .wkf{
  	  width: 90%;
  	  margin: 0 auto;
  	  display: flex;
  	  flex-direction: row;
  	  border-radius: 15rpx;
  	  background-color: #fff;
  	  margin-bottom: 40rpx;
  }
  .wkfleft image{
  	  width: 150rpx;
  	  height: 100rpx;
  	  padding: 20rpx;
  }
  .wkfcenter{
  	  display: flex;
  	  flex-direction: column;
  }
  .wkfcenter text{
  	  padding-left: 50rpx;
  	  padding-top: 30rpx;
  }
  .wkfcenter span{
  	  font-size: 18rpx;
  	  padding-left: 50rpx;
  	  padding-top: 10rpx;
  }
  
  .yw{
  	  width: 90%;
  	  margin: 0 auto;
  	  display: flex;
  	  flex-direction: row;
  	  border-radius: 15rpx;
  	  background-color: #fff;
  	  margin-bottom: 40rpx;
  }
  .ywleft image{
  	  width: 150rpx;
  	  height: 100rpx;
  	  padding: 20rpx;
  }
  .ywcenter{
  	  display: flex;
  	  flex-direction: column;
  }
  .ywcenter text{
  	  padding-left: 50rpx;
  	  padding-top: 30rpx;
  }
  .ywcenter span{
  	  font-size: 18rpx;
  	  padding-left: 50rpx;
  	  padding-top: 10rpx;
  }
  .ywright{
  	  margin-left: 120rpx;
  	  margin-top: 40rpx;
  	  color: #C0C0C0;
  }
</style>